/**
* Create by mzq
* Description: RainbowProgressBarSecond
* Date: 2025/2/13 14:52
* Update: 2025/2/13 14:52
*/
<template>
  <div class="progress-bar-container">
    <!-- 使用三个不同的div来代表不同颜色的部分 -->
    <div class="progress-bar blue" :style="{ width: '30%' }"></div>
    <div class="progress-bar green" :style="{ width: '40%' }"></div>
    <div class="progress-bar yellow" :style="{ width: '30%' }"></div>
    <div class="progress-dot"
         :class="dotColorClass"
         :style="{ left: progressPercentage + '%', transition: 'left 0.5s ease' }">
    </div>
  </div>
</template>

<script>
export default {
  name: 'RainbowProgressBarSecond',
  props: {
    progress: {
      type: Number,
      required: true
    }
  },
  computed: {
    progressPercentage() {
      // 根据0-100的progress值计算百分比位置
      if (this.progress <= 30) {
        return (this.progress / 30) * 30;
      } else if (this.progress <= 70) {
        return 30 + ((this.progress - 30) / 40) * 40;
      } else {
        return Math.min(100, 70 + ((this.progress - 70) / 30) * 30);
      }
    },
    dotColorClass() {
      if (this.progress <= 30) {
        return 'dot-blue';
      } else if (this.progress <= 70) {
        return 'dot-green';
      } else {
        return 'dot-yellow';
      }
    }
  }
};
</script>

<style scoped lang="scss">
.progress-bar-container {
  width: 100%;
  height: 10px;
  position: relative;
  border-radius: 0 0 5px 5px;
  z-index: 999;
}

/* 定义每个颜色的进度条部分 */
.progress-bar {
  height: 100%;
  position: absolute;
  top: 0;
}

.blue {
  background-color: #0099B2;
  left: 0;
}

.green {
  background-color: #9ACC77;
  left: 30%; /* 调整为新的分段位置 */
}

.yellow {
  background-color: #FEC51E;
  left: 70%; /* 调整为新的分段位置 */
}

.progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
  pointer-events: none;
  transition: background-color 0.3s ease;
  border: 2px solid white;
  z-index: 9999;

  &.dot-blue {
    background-color: #0099B2;
  }

  &.dot-green {
    background-color: #9ACC77;
  }

  &.dot-yellow {
    background-color: #FEC51E;
  }
}
</style>